<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>
		<link rel="shortcut icon" href="favicon.ico">
		<link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
		<link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
		<link href="css/animate.css" rel="stylesheet">
		<link href="css/style.css?v=4.1.0" rel="stylesheet">
	</head>

	<body class="gray-bg" style="padding: 15px;">
		<div class="row">
			<div class="col-xs-6 col-sm-4">
				<div class="tabs-container info-tab">
					<ul class="nav nav-tabs">
						<li class="active">
							<a data-toggle="tab" href="#info-tab-1" aria-expanded="true">公告信息</a>
						</li>
						<li>
							<a data-toggle="tab" href="#info-tab-2" aria-expanded="false">我的消息</a>
						</li>
						<li>
							<a data-toggle="tab" href="#info-tab-3" aria-expanded="false">升级公告</a>
						</li>
					</ul>
					<div class="tab-content">
						<div id="info-tab-1" class="tab-pane active">
							<div class="panel-body">
								<ul>
									<li>
										<a href="#">最新通知</a><span style="float: right;">2017-11-04</span></li>
									<li>
										<a href="#">系统维护通知</a><span style="float: right;">2017-11-01</span></li>
									<li>
										<a href="#">开会通知</a><span style="float: right;">2017-10-28</span></li>
								</ul>
							</div>
						</div>
						<div id="info-tab-2" class="tab-pane">
							<div class="panel-body">
								<strong>移动设备优先</strong>
								<p>在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。</p>
							</div>
						</div>
						<div id="info-tab-3" class="tab-pane">
							<div class="panel-body">
								<ul>
									<li>
										<a href="#">系统升级日志</a><span style="float: right;">2017-11-04</span></li>
									<li>
										<a href="#">系统升级日志</a><span style="float: right;">2017-11-01</span></li>
									<li>
										<a href="#">系统升级日志</a><span style="float: right;">2017-10-28</span></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="panel panel-default" style="margin-top: 20px;">
					<div class="panel-heading">
						<i class="fa fa-user"></i>&nbsp;我的客户
						<!--<a href="#" onclick="panelToggle(this);"><i class="pull-right fa fa-chevron-down"></i></a>-->
					</div>
					<div class="panel-body">
						<img src="img/kehu.PNG" />
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-sm-4">
				<div class="tabs-container order-tab">
					<ul class="nav nav-tabs">
						<li class="active">
							<a data-toggle="tab" href="#order-tab-1" aria-expanded="true">今日订单</a>
						</li>
						<li>
							<a data-toggle="tab" href="#order-tab-2" aria-expanded="false">全部订单</a>
						</li>
					</ul>
					<div class="tab-content">
						<div id="order-tab-1" class="tab-pane active">
							<div class="panel-body">
								<div>
									<div class="bg-primary">12</div><span>预留中</span></div>
								<div>
									<div class="bg-success">6</div><span>已确认</span></div>
								<div>
									<div class="bg-info">10</div><span>已取消</span></div>
								<div>
									<div class="bg-warning">3</div><span>已撤销</span></div>
								<div>
									<div class="bg-danger">0</div><span>已清位</span></div>
							</div>
						</div>
						<div id="order-tab-2" class="tab-pane">
							<div class="panel-body">
								<div>
									<div class="bg-primary">43</div><span>预留中</span></div>
								<div>
									<div class="bg-success">14</div><span>已确认</span></div>
								<div>
									<div class="bg-info">28</div><span>已取消</span></div>
								<div>
									<div class="bg-warning">5</div><span>已撤销</span></div>
								<div>
									<div class="bg-danger">12</div><span>已清位</span></div>
							</div>
						</div>
					</div>
				</div>
				<div class="panel panel-default" style="margin-top: 20px;">
					<div class="panel-heading">
						<i class="fa fa-cog"></i>&nbsp;常用系统配置
						<!--<a href="#" onclick="panelToggle(this);"><i class="pull-right fa fa-chevron-down"></i></a>-->
					</div>
					<div class="panel-body">
						<img src="" />
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-sm-4">
				<div class="panel panel-default">
					<div class="panel-heading">
						<i class="fa fa-bar-chart"></i>&nbsp;本月销售排行榜<span class="gray-font">(按订单确认日期)</span>
						<a href="#" onclick="panelToggle(this);"><i class="pull-right fa fa-chevron-down"></i></a>
					</div>
					<div class="panel-body" style="display: none;">
						<img src="img/tongjitu.PNG" />
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">
						<i class="fa fa-bar-chart"></i>&nbsp;本月销售排行榜<span class="gray-font">(按出团日期)</span>
						<a href="#" onclick="panelToggle(this);"><i class="pull-right fa fa-chevron-down"></i></a>
					</div>
					<div class="panel-body" style="display: none;">
						<img src="img/tongjitu.PNG" />
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">
						<i class="fa fa-line-chart"></i>&nbsp;本月收客走势
						<a href="#" onclick="panelToggle(this);"><i class="pull-right fa fa-chevron-down"></i></a>
					</div>
					<div class="panel-body" style="display: none;">
						<div class="ibox float-e-margins">
							<img src="img/zoushi.PNG" style="width: 95%;" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 全局js -->
		<script src="js/jquery.min.js?v=2.1.4"></script>
		<script src="js/bootstrap.min.js?v=3.3.6"></script>
		<script src="js/plugins/layer/layer.min.js"></script>

		<!-- 自定义js -->
		<script src="js/content.js?v=1.0.0"></script>

		<!-- 欢迎信息 -->
		<script src="js/welcome.js"></script>

		<script type="text/javascript">
			function panelToggle(obj) {
				var $panelBody = $(obj).closest('.panel-heading').next();
				$panelBody.slideToggle();
				if($(obj).find('i').hasClass('fa-chevron-up')) {
					$(obj).find('i').removeClass('fa-chevron-up');
					$(obj).find('i').addClass('fa-chevron-down');
				} else {
					$(obj).find('i').addClass('fa-chevron-up');
					$(obj).find('i').removeClass('fa-chevron-down');
				}
			}
		</script>
	</body>

</html>